Blinking and Changing

This recipe changes the background color of some table cells--but it does more than that! Look closely...

Discussion

Under the Document Object Model supported by Internet Explorer 4.0 and later, you can change the contents of table cells by changing their innerText or innerHTML attributes using JavaScript.

Every half second, the script calls the function Blink(), which looks like this:

function Blink()
{
    var cellRef = Rnd(64);
    cells[cellRef].bgColor = (cells[cellRef].bgColor == "#ff0000") ? "#00ff00" : "#ff0000";
    cells[cellRef].innerText = ""+Rnd(100);
    if((++blinkCt % 10) == 0) {
        if(++textIdx == 5)
            textIdx = 0;
        textCell.innerHTML = text[textIdx];        
    }
}
The cells[] array contains references to all the table cells (<TD> elements) you see above; the text[] array contains the message strings you see in the light blue square to the left of the red table. By changing the innerText attribute of the small table cells, the script changes the number in each cell. Changing the innerHTML attribute allows the addition of HTML formatting tags in the text; using HTML tags with innerText will cause them to display literally in the cell instead of formatting the text.

If you're looking at this in Netscape Navigator, then you're in trouble, because Netscape still doesn't support scripting of most HTML elements you might put into a page. For a way to accomodate some forms of changing messages, look at the The Amazing Kitty script.

Copyright ©2000 by Charles River Media, All Rights Reserved